<template>
	<div>
		<div class="chain-link-bar-wrapper">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>采购管理</el-breadcrumb-item>
				<el-breadcrumb-item to="/procurement">采购列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<el-card class="box-card">
			<div slot="header" class="clearfix"><span>采购列表</span></div>

			<div class="app-diliver-10"></div>

			<div class="clearfix app-tabs-wrapper color-black-third">
				<span :class="{ 'color-theme': page.checkStatus == '' }" class="app-tab app-margin-r-40" @click="selectTabStatus('')">全部</span>
				<span :class="{ 'color-theme': page.checkStatus == 'NOT' }" class="app-tab app-margin-r-40" @click="selectTabStatus('NOT')">未审核</span>
				<span :class="{ 'color-theme': page.checkStatus == 'PASS' }" class="app-tab app-margin-r-40" @click="selectTabStatus('PASS')">审核通过</span>
				<span :class="{ 'color-theme': page.checkStatus == 'FAIL' }" class="app-tab app-margin-r-40" @click="selectTabStatus('FAIL')">不通过</span>
				<span :class="{ 'color-theme': page.checkStatus == 'END' }" class="app-tab app-margin-r-40" @click="selectTabStatus('END')">已结束</span>
				<span :class="{ 'color-theme': page.checkStatus == 'DELETE' }" class="app-tab app-margin-r-40" @click="selectTabStatus('DELETE')">已删除</span>
			</div>

			<div class="app-diliver-15"></div>
			<div class="app-diliver-15"></div>

			<div>
				<div class="app-display-inline app-margin-h-20">
					<span class="color-black-second font-size-text">关键字：</span>
					<el-input clearable placeholder="产品名、公司名、联系人手机" v-model="page.keyWord" style="width: 380px;"></el-input>
				</div>

				<div class="app-display-inline app-margin-h-20">
					<SubmitButton
						type="primary"
						plain
						icon="el-icon-search"
						:post-option="{
							url: searchUrl,
							data: page,
							callback: searchCB
						}"
					>
						搜索
					</SubmitButton>
				</div>
			</div>

			<div class="app-diliver-15"></div>
			<div class="app-diliver-15"></div>

			<el-table :data="procurementList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
				<el-table-column type="index" :index="indexMethod"></el-table-column>

				<el-table-column label="公司" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.company_name }}</span>
						<br />
						<span>{{ scope.row.address }}</span>
					</template>
				</el-table-column>
				
				<el-table-column label="发布人" width="A">
					<template slot-scope="scope">
						<span>{{ scope.row.name }}</span>
					</template>
				</el-table-column>

				<el-table-column label="联系人" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.contact_name }}</span>
						<br />
						<span>{{ scope.row.contact_phone }}</span>
						<span v-if="scope.row.contact_email != ''">&nbsp;|&nbsp;{{ scope.row.contact_email }}</span>
					</template>
				</el-table-column>

				<el-table-column label="产品" width="200">
					<template slot-scope="scope">
						<span class="text-bold">{{ scope.row.product_name }}</span>
						<br />
						<span>{{ scope.row.product_description }}</span>
					</template>
				</el-table-column>

				<el-table-column label="数量">
					<template slot-scope="scope">
						<span>{{ scope.row.buy_number }}</span>
					</template>
				</el-table-column>

				<el-table-column sortable="custom" prop="end_date_time" label="有效日期">
					<template slot-scope="scope">
						<span>{{ scope.row.start_date_time_str }}</span>
						<br />
						~
						<br />
						<span>{{ scope.row.end_date_time_str }}</span>
					</template>
				</el-table-column>

				<el-table-column sortable="custom" label="发布日期" prop="add_date_time"/>

				<el-table-column sortable="custom" prop="check_status" label="审核|有效状态">
					<template slot-scope="scope">
						<div v-if="scope.row.is_delete == 'NO'">
							<span class="text-bold color-warning" v-if="scope.row.check_status == 'NOT'">待审核</span>
							<span class="text-bold color-success" v-if="scope.row.check_status == 'PASS'">通过</span>
							<span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">未通过</span>
							&nbsp;|&nbsp;
							<span class="text-bold color-danger" v-if="scope.row.is_time_out == 1">已结束</span>
							<span class="text-bold color-success" v-if="scope.row.is_time_out == 0">未结束</span>
							<br/>
							<span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">原因：{{scope.row.check_status_explain}}</span>
						</div>
						<span class="text-bold color-danger" v-if="scope.row.is_delete == 'YES'">已删除</span>
					</template>
				</el-table-column>

				<el-table-column label="操作人" prop="operator" width="100"/>
				<el-table-column label="操作时间" prop="operator_time" width="100"/>
				<el-table-column label="推送次数" prop="pushCnt" width="100"/>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<div v-if="scope.row.is_delete == 'NO'">
							<el-button v-if="scope.row.check_status != 'PASS'" type="success" plain size="mini" @click="checkStatusHandle(scope.row.id, 1)">通过</el-button>
							<el-button v-if="scope.row.check_status != 'FAIL'" type="warning" plain size="mini" @click="checkStatusHandle(scope.row.id, 0)">不通过</el-button>
							<NcButton
									v-if="scope.row.is_time_out == 0"
									size="mini"
									type="danger"
									:post-option="{ url: endUrl, callback: getPage, confirm: '确定要结束采购信息【' + scope.row.product_name + '】吗？', data: { id: scope.row.id } }"
									class="app-margin-l-10 app-margin-v-5"
							>
								结束
							</NcButton>

							<NcButton
									v-if="role > 1"
									size="mini"
									type="danger"
									:post-option="{ url: deleteUrl, callback: getPage, confirm: '确定要删除采购信息【' + scope.row.product_name + '】吗？', data: { id: scope.row.id } }"
									class="app-margin-l-10 app-margin-v-5"
							>
								删除
							</NcButton>

							<NcButton
									v-if="scope.row.check_status === 'PASS' && scope.row.is_push === 0"
									size="mini"
									type="primary"
									:post-option="{ url: pushUrl, callback: getPage, confirm: '确定要推送采购信息【' + scope.row.product_name + '】吗？', data: { id: scope.row.id } }"
									class="app-margin-l-10 app-margin-v-5">
								推送
							</NcButton>
							<NcButton
									v-if="scope.row.check_status === 'PASS' && scope.row.is_push === 1"
									size="mini"
									type="primary"
									:post-option="{ url: recallPushUrl, callback: getPage, confirm: '确定要撤回推送采购信息【' + scope.row.product_name + '】吗？', data: { id: scope.row.id } }"
									class="app-margin-l-10 app-margin-v-5">
								撤回
							</NcButton>

							<a class="" :href="'#/procurement/detail/' + scope.row.id" target="_blank"><el-button plain size="mini">详情</el-button></a>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<div class="pager-bar-wrapper">
				<el-pagination
					background
					layout="prev, pager, next, total"
					:total="page.totalRow"
					:page-size="page.pageSize"
					:current-page="page.pageNum"
					@current-change="pageNumChange"
					@prev-click="pageNumChange"
					@next-click="pageNumChange"
					@size-change="pageSizeChange"
				></el-pagination>
			</div>
		</el-card>

		<CheckStatusEdit :is-show="checkStatusEditVisible" :procurement-obj="editProcurement" :check-yes="checkYes"></CheckStatusEdit>
	</div>
</template>

<script>
import NcButton from '../common/NcButton';
import SubmitButton from '../common/SubmitButton';

import CheckStatusEdit from './CheckStatusEditDialog';

import Api from '../../api/Api';
import ProcurementApi from '../../api/ProcurementApi';

import JsonKit from '../../kit/JsonKit';

import { mapGetters } from 'vuex';

import Store from '../../store/index.js';

export default {
	components: {
		NcButton,
		SubmitButton,
		CheckStatusEdit
	},
	data() {
		return {
			role:0,
			procurementList: [],

			page: {
				checkStatus: '',
				keyWord: '',
				pageNum: 1,
				pageSize: 10
			},

			checkStatusEditVisible: false,
			checkYes: 0,
			editProcurement: {},

			searchUrl: ProcurementApi.URL_LIST,
			deleteUrl: ProcurementApi.URL_DELETE,
			pushUrl: ProcurementApi.URL_PUSH,
			recallPushUrl: ProcurementApi.URL_RECALL_PUSH,
			endUrl: ProcurementApi.URL_END
		};
	},
	computed: {
		...mapGetters(['hasPerm'])
	},
	created() {
		this.getPage();
		this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
		this.role = Store.state.user.role;
	},
	beforeDestroy: function() {
		this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
	},
	methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
		searchCB(json) {
			this.procurementList = json.list;
			this.setPage(json);
		},
		getPage() {
			ProcurementApi.list(this.page, json => {
				this.procurementList = json.list;
				this.setPage(json);
				console.log(this.procurementList)
			});
		},
		pageNumChange(pageNum) {
			this.page.pageNum = pageNum;
			this.getPage();
		},
		pageSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getPage();
		},
		setPage(json) {
			this.page.pageNum = json.pageNum;
			this.page.pageSize = json.pageSize;
			this.page.totalRow = json.totalRow;
		},
		indexMethod(index) {
			return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
		},
		selectTabStatus(checkStatus) {
			this.page.checkStatus = checkStatus;
			this.page.pageNum = 1;
			this.getPage();
		},
		checkStatusHandle(procurementId, checkYes) {
			this.editProcurement = JsonKit.getOf(this.procurementList, 'id', procurementId, null);
			this.checkYes = checkYes;
			this.checkStatusEditVisible = true;
		},
		hideEditDialog(isSuccess) {
			this.checkStatusEditVisible = false;
			this.editProcurement = {};

			if (isSuccess) {
				this.getPage();
			}
		}
	}
};
</script>
